<template>
  <div>
    <h2>折扣信息</h2>
    <el-table :data="discountList">
      <el-table-column label="折扣力度" prop="discount"></el-table-column>
      <el-table-column label="折扣用户" prop="userId"></el-table-column>
      <el-table-column label="折扣商店" prop="shopId"></el-table-column>
      <el-table-column label="折扣开始日期" prop="startDate"></el-table-column>
      <el-table-column label="折扣结束日期" prop="endDate"></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="pageSize"
      v-model:page-size="pageItem"
      :page-sizes="[20, 50, 100, 200]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotalItem"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { ref } from "vue";

const discountList = ref([]);
const pageItem = ref(20);
const pageSize = ref(1);
const pageTotalItem = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const deleteRow = (row: discount) => {
  console.log(row);

  axios
    .delete("/api/discount/del/" + row.discountId)
    .then((res) => {
      console.log(res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
      getDiscountInfo();
    })
    .catch((err) => {
      console.log(err);
    });
};

interface discount {
  discount: number;
  discountId: string;
  endDate: Date;
  startDate: Date;
  shopId: string;
  userId: string;
  state: number;
}

const getDiscountInfo = () => {
  axios
    .get("/api/discount/select/" + pageSize.value + "/" + pageItem.value)
    .then((res) => {
      console.log("res", res);
      pageTotalItem.value = res.data.message.total;
      discountList.value = res.data.message.list;
    })
    .catch((err) => {
      console.log("err", err);
    });
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getDiscountInfo();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getDiscountInfo();
};

getDiscountInfo();
</script>

<style lang="scss" scoped></style>
